import React from "react";
import styled from "styled-components";
const Styled = styled.div`
  display: flex;
  align-items: center;
`;

const QueryBarItem = (props) => {
  const { contentWidth = 220, labelWidth = 80, label = "" } = props;
  const children = React.Children.toArray(props.children);
  return (
    <Styled>
      {label ? (
        <label style={{ width: `${labelWidth}px` }}>{label}</label>
      ) : null}
      <div style={{ width: `${contentWidth}px` }}>{children}</div>
    </Styled>
  );
};

export default QueryBarItem;
